@import '../common/icons.scss';
@import '../common/font-size.scss';
@import '../common/color.scss';
@import '../common/nav.scss';
@import '../common/cate-product-list.scss';

html {
    font-size: 26.666667vw;
}

body {
    width: 100%;

}

#cate {
    width: 100%;
    height: 100%;
}

.cate-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}

main {
    width: 100%;
    flex: 1;
    height: 100%;
    overflow: auto;
}

.list {
    width: 100%;

    .content {
        width: 100%;
        display: flex;

        .left {
            width: 1rem;

            ul {
                width: 100%;
                display: flex;
                flex-direction: column;

                li {
                    height: .6rem;
                    line-height: .6rem;
                    width: 100%;
                    background: #f9f9f9;
                    border-bottom: 1px solid #ebebeb;
                    cursor: pointer;
                    border-left: 2px solid #f9f9f9;

                    span {
                        padding-left: .15rem;
                        font-weight: 1rem;
                        font-size: .16rem;
                        color: #333;
                    }

                    &.active {
                        border-left: 2px solid $base-color-highlight;
                        background: #fff;

                        span {
                            color: $base-color-highlight;
                        }
                    }
                }
            }
        }

        .right {
            flex: 1;
            background: #fff;

            ul {
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

                li {
                    width: .91rem;
                    display: flex;
                    flex-direction: column;
                    cursor: pointer;
                    text-align: center;

                    div {
                        padding: 0 .14rem;
                        img {
                            width: 100%;
                        }

                    }
                    span {
                        font-weight: 1rem;
                        font-size: .13rem;
                        color: #333;
                        height: .1rem;
                        line-height: .1rem;
                    }

                }
            }
        }
    }
}

.search {
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    display: flex;
    align-items: center;
    padding: 0 .1rem 0 .2rem;
    background: #fff;

    &>a {
        flex: 1;
        display: block;
        border: 1px solid #eee;
        height: .3rem;
        line-height: .3rem;
        position: relative;
        border-radius: .06rem;
    }

    &>a>i {
        padding: 0 .05rem;
    }

    &>a>span {
        // margin-left: .03rem;
        color: #333;
    }

    &>span {
        width: .4rem;
        display: inline-block;
        text-align: center;
    }
}